<!DOCTYPE html>
<html>

<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<title>Icon and Theming</title>
	<script>// delete Document.prototype.adoptedStyleSheets;</script>
	<script src="%VITE_BUNDLE_PATH%" type="module"></script>
</head>

<body class="icon1auto">
	<ui5-toggle-button id="themeToggle">Quartz</ui5-toggle-button>

	<div>SAPIcons auto ("home")</div>
	<ui5-icon name="home"></ui5-icon>

	<div>SAPIcons V4 (SAP-icons-v4/home, SAP-icons/home)</div>
	<ui5-icon name="SAP-icons/home"></ui5-icon>
	<ui5-icon name="SAP-icons-v4/home"></ui5-icon>

	<div>SAPIcons V5 ("SAP-icons-v5/home" and "horizon/home")</div>
	<ui5-icon name="SAP-icons-v5/home"></ui5-icon>
	<ui5-icon name="horizon/home"></ui5-icon>

	<br /><br />
	<div>TNTIcons auto ("tnt/actor" and "SAP-icons-TNT/actor")</div>
	<ui5-icon name="tnt/actor"></ui5-icon>
	<ui5-icon name="SAP-icons-TNT/actor"></ui5-icon>

	<div>TNTIcons V2 ("tnt-v2/actor")</div>
	<ui5-icon name="tnt-v2/actor"></ui5-icon>

	<div>TNTIcons V3 ("tnt-v3/actor")</div>
	<ui5-icon name="tnt-v3/actor"></ui5-icon>

	<br /><br />
	<div>BS Icons auto - single version ("business-suite/add-polygon")</div>
	<ui5-icon class="samples-margin" name="business-suite/add-polygon"></ui5-icon>

	<div>BS Icons auto - multiple different icon examples </div>
	<ui5-icon class="samples-margin" name="business-suite/ab-testing"></ui5-icon>
	<ui5-icon class="samples-margin" name="business-suite/bank-account"></ui5-icon>
	<ui5-icon class="samples-margin" name="business-suite/causes"></ui5-icon>
	<ui5-icon class="samples-margin" name="business-suite/driver"></ui5-icon>

	<div>BS Icons - V1 ("business-suite-v1/add-polygon")</div>
	<ui5-icon class="samples-margin" name="business-suite-v1/add-polygon"></ui5-icon>

	<div>BS Icons - V2 ("business-suite-v2/add-polygon")</div>
	<ui5-icon class="samples-margin" name="business-suite-v2/add-polygon"></ui5-icon>

	<div>BS Icons - V1 and V2 ("business-suite-v1/answered" and ("business-suite-v2/answered"))</div>
	<ui5-icon class="samples-margin" name="business-suite-v1/answered"></ui5-icon>
	<ui5-icon class="samples-margin" name="business-suite-v2/answered"></ui5-icon>

	<div>New icons since 5.05 and 4.17</div>
	<ui5-icon name="time-off"></ui5-icon>
	<ui5-icon name="add-calendar"></ui5-icon>
	<ui5-icon name="currency"></ui5-icon>
	<ui5-icon name="bell-2"></ui5-icon>
	<ui5-icon name="accessibility"></ui5-icon>
	<ui5-icon name="high-priority"></ui5-icon>

	<div>New icons since 5.06 and 4.18</div>
	<ui5-icon name="da"></ui5-icon>
	<ui5-icon name="da-2"></ui5-icon>

	<div>New icons since 5.07 and 4.19</div>
	<ui5-icon name="ai"></ui5-icon>

	<div>New tnt-icons since 3.5 and 2.4</div>
	<ui5-icon name="tnt/build-apps"></ui5-icon>
	<ui5-icon name="tnt/build-work-zone"></ui5-icon>
	<ui5-icon name="tnt/build-process-automation"></ui5-icon>
	<ui5-icon name="tnt/indicator"></ui5-icon>
	<ui5-icon name="tnt/indicator-active"></ui5-icon>
	<ui5-icon name="tnt/task-optional"></ui5-icon>
	<ui5-icon name="tnt/task-done"></ui5-icon>
	<ui5-icon name="tnt/ai-1"></ui5-icon>
	<ui5-icon name="tnt/ai-2"></ui5-icon>
	<ui5-icon name="tnt/bound-validation-rule"></ui5-icon>
	<ui5-icon name="tnt/fiori-application"></ui5-icon>
	<ui5-icon name="tnt/build-code"></ui5-icon>

	<div>New tnt-icons since 3.6 and 2.11</div>
	<ui5-icon name="tnt/business-application-studio"></ui5-icon>
	<ui5-icon name="tnt/clone-from-git"></ui5-icon>
	<ui5-icon name="tnt/business-accelerator"></ui5-icon>

	<div>New tnt-icons since 3.8 and 2.13</div>
	<ui5-icon name="tnt/add-project"></ui5-icon>
	<ui5-icon name="tnt/add-issue"></ui5-icon>
	<ui5-icon name="tnt/service-estimator"></ui5-icon>
	<ui5-icon name="tnt/ai-feature-estimator"></ui5-icon>
	<ui5-icon name="tnt/refine-test-data"></ui5-icon>
	<ui5-icon name="tnt/navigate-source-code"></ui5-icon>
	<ui5-icon name="tnt/clean-up"></ui5-icon>
	<ui5-icon name="tnt/sap-fiori-tools"></ui5-icon>

	<div>New BS Icons since 2.087 and 1.087</div>
	<ui5-icon name="business-suite/add-component"></ui5-icon>
	<ui5-icon name="business-suite/back-to-search"></ui5-icon>
	<ui5-icon name="business-suite/business-objects-folder"></ui5-icon>
	<ui5-icon name="business-suite/collaboration-manager"></ui5-icon>
	<ui5-icon name="business-suite/comparison-chart"></ui5-icon>
	<ui5-icon name="business-suite/consumer-switch"></ui5-icon>
	<ui5-icon name="business-suite/cross-order"></ui5-icon>
	<ui5-icon name="business-suite/cross-sequence"></ui5-icon>
	<ui5-icon name="business-suite/cross-target"></ui5-icon>
	<ui5-icon name="business-suite/cross-union"></ui5-icon>
	<ui5-icon name="business-suite/district-heating"></ui5-icon>
	<ui5-icon name="business-suite/empty-order"></ui5-icon>
	<ui5-icon name="business-suite/empty-sequence"></ui5-icon>
	<ui5-icon name="business-suite/empty-union"></ui5-icon>
	<ui5-icon name="business-suite/map-navigation"></ui5-icon>
	<ui5-icon name="business-suite/max-container"></ui5-icon>
	<ui5-icon name="business-suite/max-interval"></ui5-icon>
	<ui5-icon name="business-suite/min-interval"></ui5-icon>
	<ui5-icon name="business-suite/non-stackable"></ui5-icon>
	<ui5-icon name="business-suite/producer-switch"></ui5-icon>
	<ui5-icon name="business-suite/repeatable"></ui5-icon>
	<ui5-icon name="business-suite/storage-switch"></ui5-icon>
	<ui5-icon name="business-suite/subtraction-a-b"></ui5-icon>
	<ui5-icon name="business-suite/subtraction-b-a"></ui5-icon>
	<ui5-icon name="business-suite/truck-driver-2"></ui5-icon>

	<div>New icons since 5.11 and 4.23</div>
	<ui5-icon name="unsynchronize"></ui5-icon>

	<div>New icons since 5.11 and 4.23 (latest)</div>
	<ui5-icon name="verified"></ui5-icon>
	<ui5-icon name="walk-me"></ui5-icon>

	<script>
		themeToggle.addEventListener("click", event => {
			const pressed = event.target.pressed;

			window["sap-ui-webcomponents-bundle"].configuration.setTheme(pressed ? "sap_fiori_3" : "sap_horizon");
			event.target.innerHTML = pressed ? "Quartz" : "Horizon"
		});
	</script>
</body>

</html>
